<template>
  <div class="main-container">
    <div class="login-container">
      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
      >
        <h3 class="title">智慧监护系统</h3>
        <body style="text-align: center">
        </body>
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              type="text"
              placeholder="用户名"
              prefix-icon="el-icon-user-solid"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              prefix-icon="el-icon-s-help"
              placeholder="密码"
          >
          </el-input>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" name="remember-me" style="margin-bottom: 25px">记住密码</el-checkbox>
        <el-button type="text" style="float:right" @click="$router.replace('/register')">注册</el-button>
        <el-form-item style="width: 100%;display: flex;justify-content: center">
          <el-button
              size="medium"
              @click="handleLogin"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="spaceMan-parent">
      <!--动画-->
    </div>
  </div>
</template>

<script>
import {messageInfo} from "@/utils/MessageInfo";
import {Login} from "../../api/loginApi";


export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        // rememberMe: false,
      },
      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"},
        ],
      },
      loading: false,
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return;
        this.loading = true;
        Login(this.loginForm).then((res) => {
          console.log(res);
          if (res) {//请求成功的相应值
            const {id} = res.result;
            const {name} = res.result;
            // const {role} = res.result;
            // const {privilege} = res.result;
            // console.log(privilege)
            // let r = role==0?'user':'manager';
            window.sessionStorage.setItem("token", id);
            window.sessionStorage.setItem("username", name);
            // window.sessionStorage.setItem("role", r);
            // window.sessionStorage.setItem("privilege",privilege);
            window.sessionStorage.setItem("userInfo",res.result);
            this.loading = false;
            this.$router.push({
              path:"/home/userInfo"
            });
            messageInfo({message: "登陆成功！"});
          } else {
            this.loading = false;
          }
        })
      });
    }
  },
};
</script>

<style scoped>
.main-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.login-container {
  z-index: 1;
  position: absolute;
  left: 0;
  height: 100%;
  width: 30%;
  background-color: #E4F2F5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 2px 3px 3px #888888;
  opacity: 0.9;
}

.login-form {
  z-index: 1;
  width: 85%;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
  font-size: 32px;
}

.spaceMan-parent {
  position: absolute;
  right: 10%;
  width: 50%;
  min-height: 100%;
  background-image: url("../../assets/login/back1.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}


</style>
